<script setup>
import { Edit, Delete } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { onMounted } from 'vue';

onMounted(() => {
  userList();  // 在页面加载时调用 userList
})

// 用户管理相关数据模型
const categorys = ref([]) // 文章分类数据
const stuNum = ref('') // 学号
const nickname = ref('') // 姓名
const users = ref([]) // 用户列表
const pageNum = ref(1) // 当前页码
const total = ref(20) // 总条数
const pageSize = ref(3) // 每页条数
const visibleDrawer = ref(false) // 控制抽屉显示
const title = ref('') // 控制标题
const userModel = ref({
  username: '',
  password: '',
  stuNum: '',
  nickname: '',
  email: ''
}) // 表单数据模型

// 获取文章列表数据
import { userListService, userUpdateService, userRegisterService, userDeleteService } from '@/api/user.js'

// 获取用户列表
const userList = async () => {
  let params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    stuNum: stuNum.value || null,
    nickname: nickname.value || null
  }
  let result = await userListService(params);
  total.value = result.data.total;
  users.value = result.data.items;
}

// 分页条数据
const onSizeChange = (size) => {
  pageSize.value = size
  userList()
}

const onCurrentChange = (num) => {
  pageNum.value = num
  userList()
}

// 显示抽屉
const showDialog = (row) => {
  visibleDrawer.value = true;
  title.value = '编辑学生' // 设置标题
  // 数据拷贝
  userModel.value = { ...row } // 简化数据复制
  userModel.value.id = row.id // 扩展 id 属性
}

import { ElMessage, ElMessageBox } from 'element-plus'
// 编辑用户
const updateUser = async () => {
  let result = await userUpdateService(userModel.value);
  ElMessage.success(result.msg || '修改成功')
  userList() // 刷新用户列表
  visibleDrawer.value = false // 关闭抽屉
}

// 清空表单数据
const clearData = () => {
  userModel.value = {
    username: '',
    password: '',
    stuNum: '',
    nickname: '',
    email: ''
  }
}

// 取消操作
const cancelArticle = () => {
  visibleDrawer.value = false // 关闭抽屉
  clearData() // 清空表单数据
}

// 删除用户
const deleteUser = (row) => {
  ElMessageBox.confirm('你确认要删除该学生信息吗?', '温馨提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
      .then(async () => {
        let result = await userDeleteService(row.id);
        ElMessage({ type: 'success', message: '删除成功' })
        userList() // 刷新列表
      })
      .catch(() => {
        ElMessage({ type: 'info', message: '您取消了删除' })
      })
}

// 上传成功的回调
const uploadSuccess = (result) => {
  articleModel.value.coverImg = result.data
  console.log(result.data)
}

// 注册用户
const registerUser  = async () => {
  let result = await userRegisterService(userModel.value);
  ElMessage.success(result.msg || '添加成功')
  visibleDrawer.value = false
  userList() // 刷新列表
}
</script>

<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>用户管理</span>
        <div class="extra">
          <el-button type="primary"  @click="visibleDrawer = true; title='添加用户'; clearData()">添加用户</el-button>
        </div>
      </div>
    </template>

    <!-- 搜索表单 -->
    <el-form inline>
      <el-form-item label="学号：">
        <el-input placeholder="请输入学号" v-model="stuNum"></el-input>
      </el-form-item>

      <el-form-item label="姓名：">
        <el-input placeholder="请输入姓名" v-model="nickname"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="userList">搜索</el-button>
        <el-button @click="stuNum = ''; nickname = ''">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 用户列表 -->
    <el-table :data="users" style="width: 100%">
      <el-table-column label="序号" width="60">
        <template #default="{ row, $index }">
          {{ ($index + 1) + ((Number(pageNum) - 1) * Number(pageSize)) }}
        </template>
      </el-table-column>
      <el-table-column label="用户名" width="400" prop="username"></el-table-column>
      <el-table-column label="学号" prop="stuNum"></el-table-column>
      <el-table-column label="姓名" prop="nickname"></el-table-column>
      <el-table-column label="邮箱" prop="email"></el-table-column>
      <el-table-column label="操作" width="100">
        <template #default="{ row }">
          <el-button :icon="Edit" circle plain type="primary" @click="showDialog(row)"></el-button>
          <el-button :icon="Delete" circle plain type="danger" @click="deleteUser(row)"></el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="没有数据"/>
      </template>
    </el-table>

    <!-- 分页 -->
    <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[3, 5, 10, 15]"
                   layout="jumper, total, sizes, prev, pager, next" background :total="total"
                   @size-change="onSizeChange"
                   @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end"/>

    <!-- 抽屉 -->
    <el-drawer v-model="visibleDrawer" :title="title" direction="rtl" size="50%">
      <el-form :model="userModel" label-width="100px">
        <el-form-item label="用户名">
          <el-input v-model="userModel.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="userModel.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="学号">
          <el-input v-model="userModel.stuNum" placeholder="请输入学号"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="userModel.nickname" placeholder="请输入姓名" ></el-input>
        </el-form-item>
        <el-form-item label="学号">
          <el-input v-model="userModel.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="title === '添加用户' ? registerUser () : updateUser()">确认</el-button>
          <el-button @click="cancelArticle">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </el-card>
</template>

<style lang="scss" scoped>
.page-container {
  min-height: 100%;
  box-sizing: border-box;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>
